<template>
  <div class="map-station-select flex-ai-c">
    <el-select
      v-model="mapStaion"
      filterable
      clearable
      remote
      placeholder="请输入站点名称或站码"
      size="small"
      class=""
      popper-class="blue-select-dropdown "
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click.native="handleSelect(item.value)"
      >
        <span style="color: #34d7fa;">
          （{{ item.STTP_TEXT }}）
          <span class="c-white">{{ item.label }}</span>
        </span>
      </el-option>
    </el-select>
    <el-button
      icon="el-icon-search"
      class="one-photo-button"
    />
  </div>
</template>

<script>
import { layKeyMap } from '../../variable'
export default {
  name: 'MapStaionSelect',
  data () {
    this.layKeyMap = layKeyMap
    return {
      mapStaion: '',
      options: [],
      loading: false
    }
  },
  methods: {
    async handleSelect (v) {
      const station = this.options.find(item => item.value === v)
      if (!station.LGTD || !station.LTTD) {
        this.$message.warning('该测站经纬度为空')
        return
      }
      const index = Object.values(layKeyMap).findIndex(key => key === station.LX)
      const layerId = Object.keys(layKeyMap)[index]
      const layer = await this.$mapManager.invokeUtils('getLayer', layerId)
      if (!layerId || !layer) {
        console.log({ layer, layerId, station })
        console.warn('未找到相应图层')
        return
      }
      if (!layer.getVisible()) {
        await this.$mapManager.invoke('setLayerVisible', layerId, true)
        this.$mapManager.emit('updateLayer')
      }
      this.coordinate = [station.LGTD, station.LTTD]
      const [feature] = layer.getSource().getFeaturesAtCoordinate(this.coordinate)
      this.$mapManager.invoke('fit', feature.getGeometry(), { maxZoom: 13, duration: 0, padding: this.expand ? [0, 550, 0, 0] : [0, 0, 0, 0] })
      setTimeout(() => {
        this.$mapManager.invoke('selectFeature', feature)
      }, 400)
    },
    async remoteMethod (keywords) {
      this.loading = true
      if (keywords) {
        const { rows } = await this.$request.singleTableOperation({
          url: '/grid/getTableData',
          metaSet: 'YSQJC_ST_STBPRP_B',
          methodCode: 'select_byStcd',
          methodParams: {
            STCD: keywords
          },
          pageSize: 20,
          pageNum: 1
        })
        this.options = rows.map(item => ({
          ...item,
          label: `${item.STNM} ${item.STCD}`,
          value: item.STTP + item.STCD
        }))
      } else {
        this.options = []
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
$bgColor: rgba($color: #042653, $alpha: 0.8);
$textColor: #fff;
$borderColor: #0386c8ba;

.map-station-select {
  position: absolute;
  left: 594px;
  top: 88px;
  pointer-events: all;
  width: 282px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid  #0386c8ba;
  border-radius: 4px;
  overflow: hidden;

  &.no-side {
    left: 680px;
  }

  ::v-deep {
    .el-input__inner {
      background: $bgColor;
      color: $textColor;
      border-left: none;
      border-top: none;
      border-bottom: none;
      border-right: 1px solid #0386c8ba;
      border-radius: 0;

      &::placeholder {
        transform: translateY(1px);
      }
    }

    .el-select {
      width: 250px;

      .el-input {
        .el-input__inner,
        .el-select__caret {
          color: $textColor;
        }
      }
    }
  }

  .one-photo-button {
    background: $bgColor;
    padding: 6px 9px;
    border: none;
    border-radius: 0;
    color: $textColor;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;

    &:hover {
      background: #0355ce !important;
    }
  }
}

.blue-select-dropdown {
  .el-select-dropdown__item {
    padding-left: 10px !important;
  }
}
</style>
